<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
<head>
<title>无内容文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%@include file="/WEB-INF/jsp/public/commons.jspf"%>
</head>
   <body style="height: 100%; margin: 0">
       <div id="container1" style="height: 500px;"></div>
       <div id="container2" style="height: 500px;"></div>


       <script type="text/javascript" src="${pageContext.request.contextPath }/script/echarts.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container1");
var myChart = echarts.init(dom);
var app = {};
option1 = null;

var dd;

var departs=new Array();;
var complain=new Array();

var depCom=new Array();
var obj;
<c:forEach var="dep" items="${departments }">
    departs.push("${dep.name}")
    complain.push("${dep.complainCount}");
    obj=new Object();
    obj.value="${dep.complainCount}";
    obj.name="${dep.name}";
    depCom.push(obj);
</c:forEach>


option1 = {
    title: {
        text: '投诉统计',
        subtext: '各个公司投诉占比',
        left: 'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
   legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: 'center',
        data: departs
    },
    series : [
        {
            type: 'pie',
            radius : '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data:depCom,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
;
if (option1 && typeof option1 === "object") {
    myChart.setOption(option1, true);
}

//=============================================


var dom2 = document.getElementById("container2");
var myChart2 = echarts.init(dom2);
option2 = null;

option2 = {
/*    title: {
        text: 'ECharts 入门示例'
    },*/
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: departs
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: complain
    }]
};


if (option2 && typeof option2 === "object") {
    myChart2.setOption(option2, true);
}

       </script>
   </body>
</html>
